<%--
  Created by IntelliJ IDEA.
  User: 1daon
  Date: 2019/1/18
  Time: 9:43 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="t" tagdir="/WEB-INF/tags"%>
<html>
<head>
    <jsp:include page="../common/backend_head.jsp"/>
    <style type="text/css">
        #pic {
            position: absolute;
            display: none;
        }

        #pic1 {
            max-width: 150px;
            max-height: 150px;
            border-radius: 5px;
            -webkit-box-shadow: 5px 5px 5px 5px hsla(0, 0%, 5%, 1.00);
            box-shadow: 5px 5px 5px 0px hsla(0, 0%, 5%, 0.3);
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header form-search_warp">
            <form class="layui-form" action="/sys/sysUser/index.page" method="get">
                <input type="hidden" name="method" value="list" />
                <div class="layui-inline" style="width: 200px;">
                    <input type="text" name="searchUser" class="layui-input" placeholder="真实姓名或手机号（全称）" value="${searchUser}" maxlength="200" autocomplete="off">
                </div>
                <button class="layui-btn">
                    <i class="iconfont icon-search"></i> 搜索
                </button>
                <a href="javascript:void(0);" class="layui-btn" onclick="layer_show('添加用户', '/sys/sysUser/add.page?deptId=${deptId}', '600', '670')">
                    <i class="iconfont icon-add"></i> 添加用户
                </a>
            </form>
        </div>
        <div class="layui-tab-content">
            <table class="layui-table nowrap">
                <thead>
                <tr>
                    <th class="txt-c" width="30">序号</th>
                    <th>真实姓名</th>
                    <th>角色</th>
                    <th class="txt-c" width="30">头像</th>
                    <th class="txt-c" width="80">状态</th>
                    <th class="txt-c" width="120">操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${sysUserVoList.list}" var="item" varStatus="s">
                    <tr title="${item.sysUser.userId}:${item.sysUser.userTrueName}">
                        <td class="txt-c">${s.count}</td>
                        <td><a href="javascript:void(0);" onclick="layer_show('查看详细', '/sys/sysUser/detail.page?userId=${item.sysUser.userId}', '600', '670')" style="cursor: pointer;text-decoration: underline;">${item.sysUser.userTrueName}</a></td>
                        <td>${item.sysRole.roleName}</td>
                        <td class="txt-c"><img class="avatar-img" onerror="src='/images/common/avatar.png'" src="${item.sysUser.userAvatar}" alt="头像"></td>
                        <td class="txt-c">
                            <c:choose>
                                <c:when test="${item.sysUser.userStatus == 1}">
                                    启用
                                </c:when>
                                <c:when test="${item.sysUser.userStatus == 2}">
                                    禁用
                                </c:when>
                            </c:choose>
                        </td>
                        <td class="txt-c">
                            <t:auth url="/sys/sysUser/edit.page">
                                <a href="javascript:void(0);" class="layui-btn layui-btn-xs" title="修改" onclick="layer_show('修改用户', '/sys/sysUser/edit.page?userId=${item.sysUser.userId}', '600', '670')">
                                    <i class="iconfont icon-edit"></i>
                                    修改
                                </a>
                            </t:auth>
                            <t:auth url="/sys/sysUser/disable.do">
                                <a href="javascript:void(0);" onclick="disableUserEvent(${item.sysUser.userId})" class="layui-btn layui-btn-warm layui-btn-xs" title="禁用">
                                    <i class="iconfont icon-profilefill"></i>
                                    禁用
                                </a>
                            </t:auth>
                            <t:auth url="/sys/sysUser/delete.do">
                                <a class="delete-btn layui-btn layui-btn-danger layui-btn-xs" title="删除" href="/sys/sysUser/delete.do?userId=${item.sysUser.userId}">
                                    <i class="iconfont icon-delete_light"></i>
                                    删除
                                </a>
                            </t:auth>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <div class="table-page" id="table-page">
                <t:page page="${sysUserVoList}"></t:page>
            </div>
        </div>
    </div>
</div>
</body>
<jsp:include page="../common/backend_script.jsp"/>
<script type="text/javascript">
    $(".layui-table img").hover(function() {
        $('body').append("<p id='pic'><img src='" + this.src + "' id='pic1'></p>");
        $(".layui-table img").mousemove(function(e) {
            $("#pic").css({
                "top": (e.pageY + 10) + "px",
                "left": (e.pageX + 20) + "px"
            }).fadeIn("fast");
        });
    }, function() {
        $("#pic").remove();
    });
    function disableUserEvent(userId){
        layui.layer.confirm('确认要禁用该用户吗？', {
            icon: 3
        }, function(index) {
            ps_ajax("/sys/sysUser/disable.do", {userId:userId}, 'POST', 'json', function (data) {
                if (data.status == 0) {
                    layui.layer.msg(data.msg, {
                        time: 1000
                    }, function() {
                        window.location.reload();
                    });
                }else{
                    //显示错误信息
                    show_error_msg(data);
                }
            }, function (error) {
                console.log(error);
            })
        });
    }
</script>
</html>
